<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-change="tabChange">
      <el-tab-pane label="断层分布图" name="0">
        <FaultDistribution ref="faultDistribution" :data="remindData1" :loading="loading1"/>
      </el-tab-pane>
      <el-tab-pane name="1">
        <template #label>
          <div class="exclamation">
            <span v-loading="loading" class="exclamation-loading" :style="[loading ? 'width: 20px' : '']">
              <svg-icon icon-class="exclamation-point" v-if="seiShow" color="red"></svg-icon>
            </span>
            <span>地震构造图</span>
          </div>
        </template>
        <Seismotectonics ref="seismotectonics" :data="remindData2" :loading="loading"/>
      </el-tab-pane>
      <el-tab-pane label="成果管理" name="2">
        <ResultManage ref="resultManage" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="quickMapping">
import FaultDistribution from './tabComponents/faultDistribution'
import Seismotectonics from './tabComponents/seismotectonics'
import ResultManage from './tabComponents/resultManage'
import { getRemind } from '@/api/quickMapping/quickMapping/index'
import useTagsViewStore from '@/store/modules/tagsView'

const tagsViewStore = useTagsViewStore()
const { visitedViews } = storeToRefs(tagsViewStore)
const { proxy } = getCurrentInstance()
const activeName = ref('0')
const loading = ref(false)
const tabChange = val => {
  proxy.$refs.seismotectonics.completeRefreshIndexMap = false
  proxy.$refs.faultDistribution.completeRefreshIndexMap = false
  if (val === '1') {
    seiShow.value = false
    proxy.$refs.seismotectonics.completeRefreshIndexMap = true
  } else if (val === '2') {
    proxy.$refs.resultManage.getProvinceData()
    proxy.$refs.resultManage.getList()
  } else if (val === '0') {
    proxy.$refs.faultDistribution.completeRefreshIndexMap = true
  }
  proxy.$Bus.emit('tab-change')
}
const seiShow = ref(false)
const remindData1 = ref([])
const remindData2 = ref([])
const loading1 = ref(false)
onMounted(() => {
  loading.value = true
  loading1.value = true
  getRemind('0').then(res => {
    remindData1.value = res.data
    loading1.value = false
  })
  getRemind('1').then(res => {
    remindData2.value = res.data
    loading.value = false
    seiShow.value = remindData2.value.length > 0
  })
})

watch(visitedViews, () => {
  let searchNum = visitedViews.value.filter(item => item.path.includes('/quickMapping/index')).length

  let newVisitedViews = visitedViews.value.slice(0, -1)
  if (searchNum > 1) {
    newVisitedViews.map((item) => {
      if (item.path.includes('/quickMapping/index')) {
        tagsViewStore.delView(item)
      }
    })
  }
}, { deep: true, immediate: true })
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
  overflow-y: auto;
  height: 100%;

  &>.el-tabs {
    height: 100%;

    .exclamation {
      .exclamation-loading {
        display: inline-block;

        .svg-icon {
          transform: scale(2);
          color: red;
          // color: var(--el-color-danger);
          margin-right: 5px;
        }

        :deep(.el-loading-spinner) {
          top: 65%;

          .circular {
            width: 20px;
            height: 20px;
          }
        }
      }
    }

    &>:deep(.el-tabs__content) {
      height: calc(100% - 56px);
      min-height: 520px;

      &>.el-tab-pane {
        height: 100%;
      }
    }
    :deep(.el-tabs__nav){
      position: static;
    }
  }

  :deep(.el-space.space-width100) {
    .el-space__item {
      width: 100%;
    }
  }
}
</style>